<!--
@Description:产品规格属性
@Author:zqy
@Date:2021-08-26 17:16:00
@Last Modified by:zqy
@Last Modified time:2021-08-26 17:16:00
-->
<template>
  <div class="attribute">
    <div v-for="(l,i) in comlist" :key="i" class="list-item">
      <div class="label">{{ l.key }}</div>
      <div class="value">
        <div
          v-for="(item,n) in l.specs || []"
          :key="n"
          :class="{
            'active': actived(item,i),
            'disable':disabled(item,i)
          }"
          @click.stop="clickHandle(item, i)"
        >{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Attribute',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    skus: {
      type: Array,
      default: () => []
    },
    attrChoose: {
      type: Array,
      default: () => []
    },
    skuId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selected: {},
      // eslint-disable-next-line vue/no-reserved-keys
      rawSelected: {}
    }
  },
  computed: {
    comlist() {
      return this.list.map(e => {
        if (e.specs) {
          e.specs = e.specs.map(s => {
            if (!s.productAttributeId || !s.productAttrItemId) {
              s.productAttributeId = e.key
              s.productAttrItemId = s.value
            }
            return s
          })
        }
        return e
      })
    },
    chooseAbleAttr() {
      if (Object.keys(this.selected).length === 0) {
        return this.attrChoose.map(v => {
          return v
        })
      }
      const attrItemIds = []
      for (const i in this.selected) {
        const id = this.selected[i].productAttrItemId
        attrItemIds.push(id)
      }
      const tmpAttr = this.attrChoose.filter(v => attrItemIds.includes(v.attrItemId))
      let chooseAbleItem = []
      tmpAttr.forEach(v => {
        chooseAbleItem = chooseAbleItem.concat(v.chooseAbleItem)
      })
      return tmpAttr
    }
  },
  watch: {
    skuId() {
      this.setSelected(this.comlist)
    },
    comlist: {
      handler(v) {
        this.setSelected(v)
      },
      immediate: true
    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      this.openHandle()
    })
  },
  methods: {
    // 获取所有可选sku对应的规格名称
    ableSelectSku() {
      for (const item of this.skus) {
        const skuSpecs = JSON.parse(item.skuSpecs || '[]')
        const skuSepecsName = skuSpecs.map(v => {
          let name = ''
          this.comlist.forEach(com => {
            com.specs.forEach(s => {
              if (s.productAttrItemId === v.value && s.productAttributeId === v.key) {
                name = s.value
              }
            })
          })
          return name
        })
        console.log(item.id, skuSepecsName)
      }
    },
    // 设置选中项
    setSelected(list) {
      if (!this.skuId) return
      const selected = {}
      let sku
      for (const item of this.skus) {
        if (item.id === this.skuId) {
          sku = item
          break
        }
      }
      if (sku === undefined) return
      const skuSpecs = JSON.parse(sku.skuSpecs || '[]')
      for (let i = 0; i < list.length; i++) {
        const v = list[i]
        for (const s of v.specs || []) {
          for (const item of skuSpecs) {
            if (item.key === s.productAttributeId && item.value === s.productAttrItemId) {
              this.$set(selected, i, s)
              break
            }
          }
        }
      }
      if (Object.keys(selected).length > 0) {
        this.selected = selected
        this.rawSelected = {}
        this.$emit('selected', this.$deepCopy(this.selected))
      }
      this.$nextTick(() => {
        // this.setBlockStatus()
        this.$emit('list-change', this.comlist)
      })
    },
    actived(item, i) {
      const v = this.selected[i]
      if (v && v.productAttributeId === item.productAttributeId && v.productAttrItemId === item.productAttrItemId) {
        return true
      }
      return false
    },
    openHandle() {
      this.rawSelected = this.$deepCopy(this.selected)
    },
    confirmHandle(oldSelected, item) {
      /* if (Object.keys(this.selected).length < this.comlist.length) {
        this.$toast('请选择完整规格属性')
        return
      } */
      const selected = Object.entries(this.selected)
      let selectedSku
      if (selected.length > 0) {
        for (const sku of this.skus) {
          const skuSpecs = JSON.parse(sku.skuSpecs || '[]')
          let flag = 0
          for (const ss of skuSpecs) {
            // eslint-disable-next-line no-unused-vars
            for (const [i, s] of selected) {
              if (ss.key === s.productAttributeId && ss.value === s.productAttrItemId) {
                flag++
                break
              }
            }
          }
          if (flag > 0 && flag === skuSpecs.length) {
            selectedSku = sku
            break
          }
        }
      }
      if (selectedSku === undefined) {
        this.$toast('无所选规格商品')
        if (selected.length === this.list.length) {
          // 当所有规格都已选择后，无对应sku商品才重置当前选中项
          this.selected = JSON.parse(oldSelected)
        }
        this.$set(item, 'disabled', true)
        return
      }
      this.$emit('refresh', selectedSku.id)
      this.$emit('selected', this.$deepCopy(this.selected))
      // this.closedHandle()
    },
    clickHandle(item, i) {
      if (this.selected[i] === item) {
        this.$delete(this.selected, i)
        return
      }
      if (item.disabled) return
      const oldSelected = JSON.stringify(this.selected)
      this.$set(this.selected, i, item)
      this.confirmHandle(oldSelected, item)
    },
    // 设置sku锁定状态
    setBlockStatus() {
      const attrItemIds = []
      for (const i in this.selected) {
        const id = this.selected[i].productAttrItemId
        attrItemIds.push(id)
      }
      const tmpAttr = this.attrChoose.filter(v => attrItemIds.includes(v.attrItemId))
      let chooseAbleItem = []
      tmpAttr.forEach(v => {
        chooseAbleItem = chooseAbleItem.concat(v.chooseAbleItem)
      })
      this.chooseAbleAttr = tmpAttr
    },
    disabled(item, i) {
      /* if (item.disabled) {
        return item.disabled
      } */
      const chooseAbleAttr = this.chooseAbleAttr.length > 0 ? this.chooseAbleAttr : this.attrChoose

      // 若为当前属性id为规格属性Id,则当前属性可用，不再进行属性遍历匹配
      const isCur = chooseAbleAttr.some(v => v.attrItemId.includes(item.productAttrItemId))
      if (isCur) {
        this.$set(item, 'disabled', false)
        return false
      }
      // 遍历查询当前属性id是否存在所有的可选属性中
      const flag = chooseAbleAttr.every(v => v.chooseAbleItem.includes(item.productAttrItemId))
      this.$set(item, 'disabled', !flag)
      return !flag
    }
  }
}
</script>
<style lang="less" scoped>
.attribute{
  .list-item{
    padding-bottom: 10px;
    line-height: 30px;
    display: flex;
    align-items: flex-start;
    &:last-child{
      padding-bottom: 0;
    }
    .label{
      width: 70px;
      height:30px;
      font-size:14px;
      font-weight: 400;
      color: #888888;
      letter-spacing: 1px;
      text-align: justify;
      overflow:hidden;
      // white-space:normal;
      &::after{
        display: inline-block;
        width: 100%;
        content: '';
      }
    }
    .value{
      margin-left: 20px;
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      &>div{
        flex: 0 0 auto;
        padding: 0 17px;
        height: 30px;
        margin-right: 5px;
        margin-bottom: 5px;
        box-sizing: border-box;
        border-radius: 6px;
        font-size: 12px;
        color: #333;
        border: 1px solid #F5F6F7;
        background: #F5F6F7;
        letter-spacing: 1px;
        &.disable{
          color:#999;
        }
        &.active{
          color: #00C8B4;
          background: #F0FFFE;
          border-color: #00C8B4;
        }
      }
    }
  }
}
</style>
